<template>
	<view class="content" :style="[{ paddingBottom: `${bottom}px` }]">
		<view class="my-address-item-box">
			<view class="user-name-phone-box">
				<text>{{info.real_name}}</text>
				<text class="phone">{{info.user_phone}}</text>
				<text class="default" v-if="info.is_default">默认</text>
			</view>
			<view class="user-address-box">
				<text>{{info.user_address}}</text>
			</view>
		</view>
		<view class="tobepaid-plate-box">
			<view class="top-shop-box flex-c-c" @click="goShop">
				<!-- <image src="../../pageMember/static/icon10.png" mode="widthFix"></image> -->
				<text class="ellipsis">订单号: {{ info.order_sn }}</text>
				<!-- <image src="/static/cart_icon/icon1.png" mode="heightFix"></image> -->
			</view>
			<view class="goods-item-box">
				<view class="left-img-box">
					<image :src="info.image" mode=""></image>
				</view>
				<view class="right-info-box">
					<view class="top-box">
						<text class="ellipsis">{{ info.store_name }}</text>
						<text>x{{ info.total_num }}</text>
					</view>
					<view class="center-box">
						<text>{{ info.product_sku }}</text>
					</view>
					<view class="bottom-box">
						<text>{{ info.pay_integral }}</text>积分
					</view>
				</view>
			</view>
		</view>
		<view class="order-info-box">
			<view class="top-title-box">
				<text>订单信息</text>
			</view>
			<view class="bottom-order-info-box" style="flex-direction: column;">
				
				<view class="cellList" v-if="info.order_sn">
					<view class="title">订单编号：</view>
					<view class="sub-content">{{info.order_sn}}</view>
				</view>
				<view class="cellList" v-if="info.create_time">
					<view class="title">下单时间：</view>
					<view class="sub-content">{{info.create_time}}</view>
				</view>
				<view class="cellList" v-if="info.pay_time">
					<view class="title">付款时间：</view>
					<view class="sub-content">{{info.pay_time}}</view>
				</view>
				<view class="cellList" v-if="info.delivery_time">
					<view class="title">发货时间：</view>
					<view class="sub-content">{{info.delivery_time}}</view>
				</view>
				<view class="cellList" v-if="info.confirm_time">
					<view class="title">收货时间：</view>
					<view class="sub-content">{{info.confirm_time}}</view>
				</view>
				<view class="cellList" v-if="info.refund_time">
					<view class="title">申请时间：</view>
					<view class="sub-content">{{info.refund_time}}</view>
				</view>
				<view class="cellList" v-if="info.refund.refund_message" style="align-items: flex-start;">
					<view class="title">申请原因：</view>
					<view class="sub-content">
						<view>{{ info.refund.refund_message }}</view>
						<view style="margin-top: 20rpx;" v-if="info.refund.pics.length">
							<block v-for="(item, index) in info.refund.pics" :key="item.id">
								<image style="width: 25%;height: 132rpx;" @click="preImg(item.path, info.refund.pics)" :src="item.path" mode=""></image>
							</block>
						</view>
					</view>
				</view>
				<view class="cellList" v-if="info.refund.fail_message">
					<view class="title">拒绝原因：</view>
					<view class="sub-content">{{info.refund.fail_message}}</view>
				</view>
				<view class="cellList" v-if="info.logistics_no">
					<view class="title">物流单号：</view>
					<view class="sub-content copy">
						{{info.logistics_no}}
						<text @click="bindFz(info.logistics_no)">复制</text>
					</view>
				</view>
				<view class="cellList" v-if="info.delivery_company">
					<view class="title">物流公司：</view>
					<view class="sub-content">{{info.delivery_company}}</view>
				</view>
				<view class="cellList" v-if="info.mark">
					<view class="title">订单备注：</view>
					<view class="sub-content">{{info.mark}}</view>
				</view>
<!-- 				<view class="cellList" v-if="info.refund.refund_message" style="align-items: flex-start;">
					<view class="title">申请原因：</view>
					<view class="sub-content">
						<view>{{ info.refund.refund_message }}</view>
						<view style="margin-top: 20rpx;" v-if="info.refund.pics.length">
							<block v-for="(item, index) in info.refund.pics" :key="item.id">
								<image style="width: 25%;height: 132rpx;" @click="preImg(item.path, info.refund.pics)" :src="item.path" mode=""></image>
							</block>
						</view>
					</view>
				</view> -->
<!-- 				<view class="left-key-box">
					<text>订单编号：</text>
					<text>下单时间：</text>
					<text>付款时间：</text>
					<text v-if="info.delivery_time">发货时间：</text>
					<text v-if="info.logistics_no">物流单号：</text>
					<text v-if="info.delivery_company">物流公司：</text>
					<text v-if="info.mark">订单备注：</text>
				</view>
				<view class="right-value-box">
					<text>{{ info.order_sn }}</text>
					<text>{{ info.create_time }}</text>
					<text>{{ info.pay_time }}</text>
					<text v-if="info.delivery_time">{{ info.delivery_time }}</text>
					<view class="fz" v-if="info.logistics_no">
						<text>{{ info.logistics_no }}</text>
						<text @click="bindFz(info.logistics_no)">复制</text>
					</view>
					<text v-if="info.delivery_company">{{ info.delivery_company }}</text>
					<text v-if="info.mark">{{ info.mark }}</text>
				</view> -->
			</view>
		</view>
		<view class="total-price-box">
			<view class="bottom-order-info-box">
				<view class="left-key-box">
					<text>商品价格</text>
					<text>运费</text>
				</view>
				<view class="right-value-box">
					<text>{{ info.pay_integral }}积分</text>
					<text>￥{{ info.pay_postage }}</text>
				</view>
			</view>
			<view class="bottom-box">
				<text>
					实付款
					{{ info.pay_integral }}积分
					<block v-if="info.pay_postage">+￥{{ info.pay_postage }}</block>
				</text>
			</view>
		</view>
		<view class="bottom-but-box" id="bottom-but-box">
			<view
				class="buy-box"
				v-if="
				info.paid == 1
				&&
				(info.status == 0 || (info.status == 6 && info.refund.refund_type == 1))"
				@click="toPend(info, 1)"
			>
				<text>申请退款</text>
			</view>
			<view
				class="buy-box"
				v-if="info.status == 1 || info.status == 2 || (info.status == 6 && info.refund.refund_type == 2)"
				@click="toPend(info, 2)"
			>
				<text>申请售后</text>
			</view>
			<view @click="confirmFun(order_id)" class="cancel-box" v-if="info.status == 1 || (info.status == 6 && info.delivery_time && !info.confirm_time)">
				<text>确认收货</text>
			</view>
			<view class="buy-box" @click="evaluateFun(order_id)" v-if="info.status == 2 || (info.status == 6 && info.confirm_time)">
				<text>立即评价</text>
			</view>
		</view>
	</view>
</template>

<script>
	let channel
	export default {
		data(){
			return {
				bottom: 0,
				order_id: '', // 订单号
				info: {}, // 订单详情
				orderStatus: ['待发货', '待收货', '待评价', '已完成', '退款中', '退款/售后成功', '退款/售后失败'],
			}
		},
		onLoad: function (option) {
			const { order_id } = option
			this.order_id = order_id || ''
			this.getInfo(true)
			channel = this.getOpenerEventChannel()
		},
		onShow: function () {
			this.setTitle()
		},
		computed: {
			getStatus: function () {
				const { orderStatus, info: { status, refund } } = this
				if (status == 5) {
					return refund.status == 3? '售后成功' : '售后审核通过'
				}
				return orderStatus[status]
			}
		},
		methods:{
			preImg(current, list){
				const urls = list.map(item => item.path)
				uni.previewImage({
					current,
					urls
				})
			},
			// 设置标题
			setTitle: function () {
				this.$nextTick(() => {
					uni.setNavigationBarTitle({
						title: this.getStatus || '订单详情',
					})
				})
			},
			// 获取订单详情
			getInfo: async function (isSet) {
				uni.showLoading({ title: '加载中' })
				const { order_id } = this
				const { code, data, message } = await this.$u.api.getHallOrderDetail({ order_id })
				if (code == '1') {
					console.log('订单详情', data)
					this.info = data
					isSet && this.setTitle()
					uni.createSelectorQuery()
					.in(this)
					.select('#bottom-but-box')
					.fields({ size: true }, res => {
						console.log(res)
						this.bottom = res.height
					})
					.exec()
				} else {
					this.$showToast(message || '获取订单详情失败')
				}
			},
			// 单号复制
			bindFz: function (data) {
				uni.setClipboardData({
					data,//复制的内容
					success: _ => {
						uni.showToast({
							title: '已复制到剪贴板',
							icon: 'none'
						})
					}
				})
			},
			// 前往退款页面
			toPend: function (item, refund_type, order_type = 2) {
				const param = { item, refund_type, order_type }
				uni.navigateTo({
					// url: `/pageMember/orderDetails/returnGoods?order_id=${order_id}&refund_type=${refund_type}&order_type=${order_type}`,
					url: `/pageMember/orderDetails/returnGoods`,
					events: {
						changeStatus: isUp => {
							isUp && this.getInfo(false)
							channel.emit('isChange', true)
						}
					},
					success: res => {
						res.eventChannel.emit('changeStatus', param)
					}
				})
			},
			// 确认收货
			confirmFun: function (order_id) {
				uni.showModal({
					title: '您确定要收货么?',
					success: async res => {
						if (res.confirm) {
							console.log(order_id)
							uni.showLoading({ title: '加载中' })
							const { code, data, message } = await this.$u.api.setHoConfirmOrder({ order_id })
							if (code == '1') {
								console.log('确认收货', data)
								uni.showModal({
									title: '收货成功',
									showCancel: false
								})
								this.getInfo(true)
								this.channel.emit('isChange', true)
							} else {
								this.$showToast(message || '收货失败')
							}
						}
					}
				})
			},
			// 立即评价
			evaluateFun: function (order_id) {
				uni.navigateTo({
					url: `/pageMember/orderDetails/hallOrderEvaluate?order_id=${order_id}`,
					events: {
						changeStatus: isUp => {
							isUp && this.getInfo(false)
							channel.emit('isChange', true)
						}
					},
					success: res => {
						res.eventChannel.emit('changeStatus')
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	
	.cellList{
		flex: 1;
		display: flex;
		align-items: center;
		margin: 0 0 20rpx 0;
		.title{
			flex: 1;
		}
		.sub-content{
			flex: 3;
		}
		.copy{
			display: flex;
			align-items: center;
			justify-content: space-between;
			text{
				color: #1653EF;
			}
		}
	}
	.content{
		width: 100%;
		box-sizing: border-box;
		background: white;
		.my-address-item-box{
			padding: 40rpx 20rpx;
			background: #fff;
			border-bottom: 20rpx solid #F5F5F5;
			.user-name-phone-box{
				font-size: 30rpx;
				font-weight: bold;
				color: #333333;
				margin-bottom: 20rpx;
				.phone{font-size: 28rpx;margin-left: 20rpx;}
				.default{
					display: inline-block;
					width: 80rpx;
					height: 30rpx;
					background: #FF5C5C;
					border-radius: 15rpx;
					font-size: 22rpx !important;
					text-align: center;
					font-weight: 400;
					color: #FFFFFF !important;
					margin-left: 20rpx;
				}
			}
			.user-address-box{
				font-weight: 400;
				font-size: 28rpx;
				color: #666666;
			}
		}
		.tobepaid-plate-box{
			width: 100%;
			padding: 30rpx 20rpx;
			background: #fff;
			border-bottom: 20rpx solid #F5F5F5;
			.top-shop-box{
				padding-bottom: 20rpx;
				font-size: 30rpx;
				font-weight: 400;
				color: #000000;
				justify-content: flex-start;
				text{max-width: 460rpx;padding: 0 10rpx;}
				image{width: 35rpx; height: 35rpx;}
				image:last-child{width: 25rpx; height: 25rpx;}
			}
			.goods-item-box{
				display: flex;
				margin-bottom: 30rpx;
				.left-img-box{
					flex: 0.2;
					line-height: 0;
					image{width: 220rpx;height: 220rpx;border-radius: 10rpx;}
				}
				.right-info-box{
					flex: 0.8;
					padding-left: 20rpx;
					min-width: 0;
					.top-box{
						font-size: 30rpx;
						font-weight: bold;
						color: #000000;
						display: flex;
						padding-bottom: 20rpx;
						text:first-child{flex: 0.8;}
						text:last-child{flex: 0.2;font-size: 28rpx;font-weight: 400;color: #999999;text-align: right;}
					}
					.center-box{
						font-size: 28rpx;
						font-weight: 400;
						color: #999999;
						padding-bottom: 70rpx;
					}
					.bottom-box{
						font-size: 22rpx;
						font-weight: bold;
						color: #333333;
						text{font-size: 30rpx;}
					}
				}
			}
		}
		.order-info-box{
			padding: 20rpx 0;
			background: #fff;
			border-bottom: 20rpx solid #F5F5F5;
			.top-title-box{
				font-size: 30rpx;
				font-weight: bold;
				color: #333333;
				padding: 20rpx;
				padding-bottom: 0;
			}
			.bottom-order-info-box{
				padding: 20rpx;
				padding-bottom: 0;
				display: flex;
				font-size: 26rpx;
				font-weight: 400;
				color: #333333;
				.left-key-box{flex: 0.25;display: flex;flex-direction: column;text{padding-bottom: 20rpx;}}
				.right-value-box{
					flex: 0.75;
					display: flex;
					flex-direction: column;
					text{padding-bottom: 20rpx;}
					.fz{
						display: flex;
						justify-content: space-between;
						text:last-child{color: #1653EF;}
					}
				}
			}
		}
		.total-price-box{
			padding:  20rpx;
			background: #fff;
			.bottom-order-info-box{
				display: flex;
				font-size: 30rpx;
				font-weight: 400;
				color: #333333;
				.left-key-box{flex: 0.5;display: flex;flex-direction: column;text{padding-bottom: 20rpx;}}
				.right-value-box{flex: 0.5;display: flex;flex-direction: column;text{padding-bottom: 20rpx; text-align: right;}}
			}
			.bottom-box{
				font-size: 26rpx;
				font-weight: bold;
				color: #333333;
				text-align: right;
			}
		}
		.bottom-but-box{
			width: 100%;
			position: fixed;bottom: 0;z-index: 100;
			background: #fff;
			padding: 20rpx 20rpx 80rpx 20rpx;
			display: flex;
			justify-content: flex-end;
			view{
				padding: 20rpx 50rpx;
				border-radius: 50rpx;
				font-weight: 400;
				color: #000000;
				background: rgba(48, 48, 48, 0);
				margin: 0 0 0 20rpx;
				border: 1rpx solid #808080;
			}
			.cancel-box{
				background: #000;
				color: #fff;
			}
		}
	}
</style>